﻿@model NavigatorBarModel
@{
    Layout = "_Default";
}
@section css {
    <style>
        #container1 {
            width: 100%;
            height: 430px;
        }

        #container2 {
            width: 100%;
            height: 430px;
            margin-top: 20px;
        }

        #container3 {
            width: 100%;
            height: 430px;
            margin-top: 20px;
        }

        @@media (min-width: 769px) {
            #container2 {
                height: 430px;
                margin-top: 20px;
                float: left;
            }

            #container3 {
                height: 430px;
                margin-top: 20px;
                float: left;
            }
        }
    </style>
}

@section javascript {
    <script src="~/node_modules/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">

        var myChart1 = echarts.init(document.getElementById("container1"));
        var myChart2 = echarts.init(document.getElementById("container2"));

        $('#btn_repeat').on('click', function () {
            $('#menuSelectA').selectpicker('val', 0);
            $('#menuSelectB').selectpicker('val', 0);
            $('#menuSelectC').selectpicker('val', 50);
        });

        $.ajax({
            url: '/api/ResponseStatistics/Stack/',
            data: { txt: "成品", line: "9", sum: "50" },
            type: "get",
            contentType: 'application/json',
            success: function (res) {
                if (res != null) {
                    document.getElementById("title_txt1").innerHTML = "第9产线 成品";
                    viewAbinding(res);
                }
            },
            error: function (e) {
                toastr.error(e.responseText);
            }
        });

        $("#btn_query").on('click', function () {
            if ($("#menuSelectA").val() == 0) {
                toastr.error("请选择产线");
            }
            if ($("#menuSelectB").val() == 0) {
                toastr.error("请选择任务类型");
            }
            if ($("#menuSelectB").val() != 0) {
                $.ajax({
                    url: '/api/ResponseStatistics/Stack/',
                    data: { txt: $("#menuSelectB").val(), line: $("#menuSelectA").val(), sum: $("#menuSelectC").val() },
                    type: "Get",
                    success: function (res) {
                        if (res != null) {
                            document.getElementById("title_txt1").innerHTML = "第" + $("#menuSelectA").val() + "产线 " + $("#menuSelectB").val();
                            viewAbinding(res);
                        }
                    },
                    error: function (e) {
                        toastr.error(e.responseText);
                    }
                });
            }
        });

        function viewAbinding(data) {
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['开始时间(s)', '准备时间(s)', '完成时间(s)']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.xAxisTitle,
                        axisLabel: { rotate: -60 }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [{
                    name: '开始时间(s)',
                    type: 'bar',
                    stack: 'rw',
                    data: data.timeA
                }, {
                    name: '准备时间(s)',
                    type: 'bar',
                    stack: 'rw',
                    data: data.timeB
                }, {
                    name: '完成时间(s)',
                    type: 'bar',
                    stack: 'rw',
                    data: data.timeC
                }]
            };
            myChart1.setOption(option);
        };

        $(window).resize(function () {
            myChart1.resize();
        });
    </script>

}

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">统计</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="@CoreConfiguration.DefaultMain">首页</a></li>
                    <li class="breadcrumb-item active">统计</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">查询条件</div>
    <div class="card-body">
        <form class="form-inline">
            <div class="row">
                <div class="form-group col-sm-6 col-lg-auto">
                    <label class="control-label" for="txt_select">选择产线</label>
                    <div class="input-group flex-sm-fill">
                        <select class="selectpicker selectc group-select" id="menuSelectA" data-dropup-auto="false">
                            <option value="0">请选择</option>
                            <option value="9" selected>L9</option>
                            <option value="10">L10</option>
                            <option value="11">L11</option>
                            <option value="12">L12</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-sm-6 col-lg-auto">
                    <label class="control-label" for="txt_select">选择任务类型</label>
                    <div class="input-group flex-sm-fill">
                        <select class="selectpicker selectc group-select" id="menuSelectB" data-dropup-auto="false">
                            <option value="0">请选择</option>
                            <option value="成品" selected>成品</option>
                            <option value="返料">返料</option>
                            <option value="外纸箱">外纸箱</option>
                            <option value="小纸盒">小纸盒</option>
                            <option value="说明书">说明书</option>
                            <option value="空托盘">空托盘</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-sm-6 col-lg-auto">
                    <label class="control-label" for="txt_select">选择数量</label>
                    <div class="input-group flex-sm-fill">
                        <select class="selectpicker selectc group-select" id="menuSelectC" data-dropup-auto="false">
                            <option value="50" selected>50条</option>
                            <option value="100">100条</option>
                            <option value="150">150条</option>
                            <option value="200">150条</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-sm-6 col-lg-auto flex-sm-fill justify-content-sm-end align-self-sm-end">
                    <button style="margin:3px" type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
                    <button style="margin:3px" type="button" id="btn_repeat" class="btn btn-primary btn-fill"><i class="fa fa-repeat" aria-hidden="true"></i><span>重置</span></button>
                </div>
            </div>
        </form>
    </div>
</div>
<div>
    <div class="card">
        <div class="card-header" id="title_txt1"></div>
        <div id="container1"></div>
    </div>
    <div class="card">
        <div class="card-header" id="title_txt2"></div>
        <div id="container2" class="col"></div>
        <div id="container3" class="col"></div>
    </div>
</div>